<template>
  <!-- 访问密码 -->
  <el-dialog
    v-model="props.visible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('userCenter.t4') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div class="main">
      <el-form
        ref="formEl"
        :model="formData"
        :rules="rules"
        status-icon
        label-position="left"
      >
        <el-form-item
          label=""
          prop="password"
        >
          <el-input
            type="password"
            v-model.trim="formData.password"
            :placeholder="t('userCenter.p5')"
            :maxlength="6"
            autocomplete="new-password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label=""
          prop="confirmPassword"
        >
          <el-input
            type="password"
            v-model.trim="formData.confirmPassword"
            :placeholder="t('userCenter.p6')"
            :maxlength="6"
            autocomplete="new-password"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="flexcc mt-3">{{ t('userCenter.text2') }}</div>
    <div class="flexcc mt-1">{{ t('userCenter.text2_1') }}</div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'setAccessPassword'])

const handleClose = () => {
  emit('close')
}

// 取消
const cancel = () => {
  handleClose()
}
// 确定
const confirm = () => {
  if (!formEl.value) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      emit('setAccessPassword', formData.value.password)
      handleClose()
    }
  })
}

//
const formEl = ref(null)
const formData = ref({})
const validator = {
  confirmPassword: (rule, value, callback) => {
    if (!value) {
      return callback(new Error(t('userCenter.r2')))
    }
    if (value !== formData.value.password) {
      return callback(new Error(t('userCenter.r3')))
    }

    callback()
  }
}
const rules = ref({
  password: [{ required: true, message: t('userCenter.r1'), trigger: 'change', min: 6 }],
  confirmPassword: [{ required: true, validator: validator.confirmPassword, trigger: 'change' }]
})
</script>

<style scoped lang="scss">
.main {
  padding: 0 200px;
}
</style>
